﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RewardLucky.ascx.cs" Inherits="UserControl_RewardLucky" %>
<link href="<%= ResolveUrl("~/Styles/countdown.css")%>" rel="stylesheet" type="text/css" />
<script src="<%= ResolveUrl("~/Scripts/counter_mini.js")%>" type="text/javascript"></script>
<div class="right_content_boxes">
    <h1>Rewards Lucky Draw</h1>
    <div id="right_content1">
        <h2>Score: 345 000 </h2>
        <h2>Date: 31/12/2011 </h2>
        <h2>Time: 00:00 AM</h2>        
        <div id="tab">
            <div style="width: 100%; height: 100%; margin: 0px auto;">
	            <div style="position: relative; width: 245px; margin: 0px auto; font-size: 12px; font-variant: small-caps;  color: #000;">
		            <div class="numberCount">
			            <div id="my_counter_2" class="borders">
			            </div>
			            <div>Days</div>
		            </div>
		            <div class="numberCount">
			            <div id="my_counter_3" class="borders">
			            </div>
			            <div>Hours</div>
		            </div>
		            <div class="numberCount">
			            <div id="my_counter_4" class="borders">
			            </div>
			            <div>Minutes</div>
		            </div>
		            <div class="numberCount">
			            <div id="my_counter_5" class="borders">
			            </div>
			            <div>Seconds</div>
		            </div>
	            </div>
                <br class="clear" />
            </div>
            <br class="clear" />
            <script type="text/javascript">
                var myCounter = null
                var timerId = null
                function loadCounter() {
                    myCounter = [
		            new Counter("my_counter_2",
		            {
		                digitsNumber: 2,direction: Counter.ScrollDirection.Downwards,
		                characterSet: Counter.DefaultCharacterSets.numericUp, charsImageUrl: '<%= ResolveUrl("~/images/numeric_up_blackbg5.png")%>',
		                markerImageUrl: '<%= ResolveUrl("~/images/marker.png")%>',extraClassName: { left: "ex1_left",right: "ex1_right",inner: "ex1_inner" }
		            }),
		            new Counter("my_counter_3",
		            {
		                digitsNumber: 2,direction: Counter.ScrollDirection.Downwards, characterSet: Counter.DefaultCharacterSets.numericUp,
		                charsImageUrl: '<%= ResolveUrl("~/images/numeric_up_blackbg5.png")%>', markerImageUrl: '<%= ResolveUrl("~/images/marker.png")%>',
		                extraClassName: {left: "ex1_left",right: "ex1_right",inner: "ex1_inner"}
		            }),
		            new Counter("my_counter_4",
		            {
		                digitsNumber: 2, direction: Counter.ScrollDirection.Downwards, characterSet: Counter.DefaultCharacterSets.numericUp,
		                charsImageUrl: '<%= ResolveUrl("~/images/numeric_up_blackbg5.png")%>', markerImageUrl: '<%= ResolveUrl("~/images/marker.png")%>',
		                extraClassName: {left: "ex1_left",right: "ex1_right",inner: "ex1_inner" }
		            }),
		            new Counter("my_counter_5",
	                {
	                    digitsNumber: 2,direction: Counter.ScrollDirection.Downwards, characterSet: Counter.DefaultCharacterSets.numericUp,
	                    charsImageUrl: '<%= ResolveUrl("~/images/numeric_up_blackbg5.png")%>', markerImageUrl: '<%= ResolveUrl("~/images/marker.png")%>',
	                    extraClassName: {left: "ex1_left",right: "ex1_right",inner: "ex1_inner" }
	                })
		            ];
	                timerId = window.setInterval(function () {
	                    var destTime = new Date(2011, 12 - 1, 31, 24, 00, 00);
	                    var now = new Date();
	                    var diff = Math.floor((destTime - now) / 1000);
	                    var ExpiredDay = Math.floor((diff / (60 * 60 * 24)) % 365);
	                    var ExpiredHour = Math.floor((diff / (60 * 60)) % 24);
	                    var ExpiredMinute = Math.floor((diff / 60) % 60);
	                    var ExpiredSecond = (diff % 60);

	                    myCounter[0].setValue(ExpiredDay,800);
	                    myCounter[1].setValue(ExpiredHour,800);
	                    myCounter[2].setValue(ExpiredMinute,800);
	                    myCounter[3].setValue(ExpiredSecond,800);

	                    if(ExpiredDay==0 && ExpiredHour==0 && ExpiredMinute==0 && ExpiredSecond==0) {
	                        window.clearInterval(timerId);
                            //action when complete counter
	                    }
	                }, 1000);
                }
                loadCounter();
            </script>
        </div>
        <a href="#">
            <img src="<%= ResolveUrl("~/images/learnmore.png")%>" alt="" align="left" style="margin:10px 8px 0 15px" />
        </a>
        <a href="#">
            <img src="<%= ResolveUrl("~/images/reedem.png")%>" alt="" align="left" style="margin:10px 0 0 0" />
        </a>
        <br class="clear" />
    </div>
    <img src="<%= ResolveUrl("~/images/right_btm.jpg")%>" alt="" align="absbottom" />
</div>